<template>
	<view class="store-page">
		<nav-bar title="物流承运商入驻" :showLeftIcon="true" :leftSlot="false"></nav-bar>
		<scroll-view class="content-box" scroll-y>
			<uni-forms :rules="rules" :value="form" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item class="formTitle" required label="信息填写" label-width="300">
				</uni-forms-item>
				<view class="basic-information">
					<uni-forms-item label="公司名称" label-width="300" name="companyName">
						<input type="text" style="text-align: right;font-size: 24rpx;" v-model="form.companyName"
							placeholder="请填写" />
					</uni-forms-item>
					<uni-forms-item label="法人姓名" label-width="300" name="corporateName">
						<input type="text" style="text-align: right;font-size: 24rpx;" v-model="form.corporateName"
							placeholder="请填写" />
					</uni-forms-item>
					<uni-forms-item label="法人电话" label-width="300" name="corporatePhone">
						<input type="text" style="text-align: right;font-size: 24rpx;" v-model="form.corporatePhone"
							placeholder="请填写" @blur="binddata('corporatePhone',$event.detail.value)" />
					</uni-forms-item>
					<uni-forms-item label="业务负责人姓名" label-width="300" name="businessManagerName">
						<input type="text" style="text-align: right;font-size: 24rpx;"
							v-model="form.businessManagerName" placeholder="请填写" />
					</uni-forms-item>
					<uni-forms-item label="业务负责人电话" label-width="300" name="businessManagerPhone">
						<input type="text" style="text-align: right;font-size: 24rpx;"
							v-model="form.businessManagerPhone" placeholder="请填写"
							@blur="binddata('businessManagerPhone',$event.detail.value)" />
					</uni-forms-item>
					<uni-forms-item label="紧急联系人电话" label-width="300" name="emergencyContactPhone">
						<input type="text" style="text-align: right;font-size: 24rpx;"
							v-model="form.emergencyContactPhone" placeholder="请填写"
							@blur="binddata('emergencyContactPhone',$event.detail.value)" />
					</uni-forms-item>
				</view>
				<uni-forms-item class="formTitle" required label="信息上传" label-width="300">
				</uni-forms-item>
				<view class="information-upload">
					<uni-forms-item label="营业执照+道路运输许可证" label-width="300">
						<view class="imgs">
							<u-upload :fileList="form.businessLicense" @afterRead="afterRead" @delete="deletePic"
								name="businessLicense" multiple :maxCount="1" :previewFullImage="true" width="150"
								height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
							<u-upload :fileList="form.roadTransportPermit" @afterRead="afterRead" @delete="deletePic"
								name="roadTransportPermit" multiple :maxCount="1" :previewFullImage="true" width="150"
								height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
						</view>
					</uni-forms-item>
					<uni-forms-item label="法人身份证" label-width="300">
						<view class="imgs">
							<u-upload :fileList="form.frontCorporateIdentityCard" @afterRead="afterRead"
								@delete="deletePic" name="frontCorporateIdentityCard" multiple :maxCount="1"
								:previewFullImage="true" width="150" height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
							<u-upload :fileList="form.behindCorporateIdentityCard" @afterRead="afterRead"
								@delete="deletePic" name="behindCorporateIdentityCard" multiple :maxCount="1"
								:previewFullImage="true" width="150" height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
						</view>
					</uni-forms-item>
					<uni-forms-item label="业务负责人身份证" label-width="300">
						<view class="imgs">
							<u-upload :fileList="form.frontBusinessManagerIDCard" @afterRead="afterRead"
								@delete="deletePic" name="frontBusinessManagerIDCard" multiple :maxCount="1"
								:previewFullImage="true" width="150" height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
							<u-upload :fileList="form.behindBusinessManagerIDCard" @afterRead="afterRead"
								@delete="deletePic" name="behindBusinessManagerIDCard" multiple :maxCount="1"
								:previewFullImage="true" width="150" height="90">
								<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
									style="width: 300rpx;"></image>
							</u-upload>
						</view>
					</uni-forms-item>
					<uni-forms-item label="经营场地及车辆照片(最少6张)" label-width="300">
						<view class="imgs">
							<u-upload :fileList="form.businessSiteVehiclePhotos" @afterRead="afterRead"
								@delete="deletePic" name="businessSiteVehiclePhotos" multiple :maxCount="10"
								:previewFullImage="true" width="100" height="100"></u-upload>
						</view>
					</uni-forms-item>
				</view>
				<!-- <view>
					<button @click="submitForm('form')">校验表单</button>
					<button size="mini" @click="validateField('form')">只校验用户名和邮箱项</button>
					<button size="mini" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
					<button size="mini" @click="clearValidate('form')">移除全部表单校验结果</button>
					<button @click="resetForm">重置表单</button>
				</view> -->
			</uni-forms>
		</scroll-view>

		<!-- <you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem" :showMoreTab="true"></you-tabs> -->
		<!-- 	<you-scroll 
			:loadingHeight="loadingHeight" 
			:mainHeight="scrollHeight" 
			:isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" 
			@onRefresh="onRefresh" 
			@loadMore="loadMore">
			<template>
				
			</template>
		</you-scroll> -->
		<you-bottom-btn :btnConfig="bottomBtnConfig" @clickSubmit="clickSubmit"></you-bottom-btn>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		name: 'Store',
		components: {},
		data() {
			return {
				form: {
					companyName: '',
					corporateName: '',
					corporatePhone: '',
					businessManagerName: '',
					businessManagerPhone: '',
					emergencyContactPhone: '',
					businessLicense: [],
					roadTransportPermit: [],
					frontCorporateIdentityCard: [],
					behindCorporateIdentityCard: [],
					frontBusinessManagerIDCard: [],
					behindBusinessManagerIDCard: [],
					businessSiteVehiclePhotos: [],
				},
				rules: {
					corporatePhone: {
						rules: [{
								required: true,
								errorMessage: '请填写电话',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请填写正确电话长度',
							}
						],
					},
					businessManagerPhone: {
						rules: [{
								required: true,
								errorMessage: '请填写电话',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请填写正确电话长度',
							}
						],
					},
					emergencyContactPhone: {
						rules: [{
								required: true,
								errorMessage: '请填写电话',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请填写正确电话长度',
							}
						],
					},
				},

				loadingHeight: '',
				scrollHeight: '',
				bottomBtnConfig: [{
					text: '提交审核',
					class: 'confirm',
					funcName: 'clickSubmit'
				}],
			}
		},

		async onLoad() {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 48 + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'

		},
		async onShow() {

		},
		methods: {
			clickSubmit() {
				console.log(this.form);
			},
			deletePic(event) {
				this.form[`${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form[`${event.name}`].length
				lists.map((item) => {
					this.form[`${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					// 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
					console.log(result, '上传图像result');
					let item = this.form[`${event.name}`][fileListLen]
					this.form[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result.status,
						message: result.status == 'failed' ? '上传失败' : '',
						url: result.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.store-page {
		background: #ffffff;

		.content-box {
			max-height: calc(100vh - 216rpx);
			padding: 20rpx;
			padding-top: 0;

			.formTitle {
				font-weight: 600;
				color: #000;
				margin: 0;
			}

			.basic-information,
			.information-upload {
				background: #fff;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
<style lang="scss">
	.basic-information {

		.uni-group__content,
		.information-upload {
			border-radius: 20rpx !important;

		}

		.uni-forms-item__label {
			width: 300rpx !important;
		}

		.uni-forms-item {
			align-items: center;
			margin: 0;
			border-bottom: 1px solid #e9e9e9;

			&:last-child {
				border: 0;
			}
		}
	}

	.information-upload {
		.uni-forms-item {
			display: block;

		}
	}

	.imgs {
		display: flex;

		>view {
			width: 50%;

			>view {
				display: block;
				width: 100% !important;
			}
		}
	}

	.msg--active {
		opacity: 1;
		transform: translateY(-100%);
	}
</style>